<template>
    <view class="main dispaly-just-between">
        <view class="item" v-for="item in props.data" :key="item.id" @click="skip(item.meeting_type)">
            <view class="cover">
                <image :src="item.image" mode="aspectFill" />
            </view>
            <view class="content">
                <view class="title over-2">{{ item.title }}</view>
                <view class="time dispaly-center">
                    <view class="icon">
                        <image src="/static/icon/time.png" />
                    </view>
                    <view class="time-str">{{ item.start_time + '-' + item.end_time }}</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
import { navTo } from '@/utils/util';

import type { DoubelType } from '@/types/responseData'

const props = defineProps<{
    data?: DoubelType[]
}>()


const skip = (item: number) => {
    if (item % 2 == 0) {
        navTo(`/subPackage/doubleSelectionMeeting/unitDetail?id=${item}`)
    } else {
        navTo(`/subPackage/doubleSelectionMeeting/jobFairDetail?id=${item}`)
    }
}
</script>
<style lang="scss" scoped>
.main {
    flex-wrap: wrap;

    .item {
        margin-bottom: 20rpx;

        .content {
            padding: 17rpx 14rpx;
            background-color: #fff;
            border-radius: 0 0 20rpx 20rpx;
            width: 332rpx;

            .title {
                font-family: PingFang SC, PingFang SC;
                font-weight: bold;
                font-size: 28rpx;
                color: #000000;
                line-height: 40rpx;
                margin-bottom: 15rpx;
            }

            .time {
                .icon {
                    margin-right: 5rpx;
                    line-height: 24rpx;

                    image {
                        width: 24rpx;
                        height: 24rpx;
                    }
                }

                .time-str {
                    font-family: PingFang SC, PingFang SC;
                    font-weight: 400;
                    font-size: 22rpx;
                    color: #7E7E7E;
                }
            }
        }

        .cover {
            image {
                width: 332rpx;
                height: 197rpx;
                border-radius: 20rpx 20rpx 0 0;
            }
        }
    }
}
</style>